<template>
  <div class="app-container">
    <el-form ref="filterForm" :inline="true" :model="listQuery" class="filter-container" @submit.native.prevent>
      <el-form-item prop="tel">
        <el-input v-model="listQuery.tel" size="small" placeholder="请输入手机号码" clearable style="width: 200px;" @keyup.enter.native="handleFilter" />
      </el-form-item>
      <el-form-item>
        <el-button
          size="small"
          type="primary"
          icon="el-icon-search"
          @click="handleFilter"
        >查询</el-button>
        <el-button
          size="small"
          @click="resetFilter"
        >重置</el-button>
      </el-form-item>
    </el-form>

    <el-alert
      v-if="showUserInfo"
      title="该手机号码已注册医时空微信，注册用户信息如下："
      type="success"
      show-icon
      class="mb20"
    />

    <el-alert
      v-if="showEmpty"
      title="该手机号码还未注册医时空微信"
      type="warning"
      show-icon
      class="mb20"
    />

    <el-alert
      v-if="showState"
      title="该手机号码已注册医时空微信，注册用户信息如下："
      type="info"
      description="请注意，该注册用户还未通过医生身份验证，请核实。"
      show-icon
      class="mb20"
    />

    <el-card v-for="item in renderList" :key="item.id" class="box-card mb20">
      <div slot="header" class="card-header clearfix">
        <h5 class="title pull-left">用户信息</h5>
      </div>
      <div class="card-wrapper">
        <el-row>
          <el-col :span="24"><strong>姓名：</strong>{{ item.name }}</el-col>
        </el-row>
        <el-divider />
        <el-row>
          <el-col :span="24"><strong>城市：</strong>{{ item.provinceName }}{{ item.cityName }}</el-col>
        </el-row>
        <el-divider />
        <el-row>
          <el-col :span="24"><strong>医院：</strong>{{ item.hospname }}</el-col>
        </el-row>
        <el-divider />
        <el-row>
          <el-col :span="24"><strong>科室：</strong>{{ item.adfname }}</el-col>
        </el-row>
        <el-divider />
        <el-row>
          <el-col :span="24">
            <strong>邮箱地址：</strong>
            <a :href="`mailto:${item.email}`" target="_blank">{{ item.email }}</a>
          </el-col>
        </el-row>
        <el-divider />
        <el-row>
          <el-col :span="24"><strong>电话号码：</strong>{{ item.tel }}</el-col>
        </el-row>
      </div>
    </el-card>
  </div>
</template>

<script>
import {
  getUsersList
} from '@/api/users'

export default {
  name: 'PhoneUsersList',
  data() {
    return {
      listQuery: {
        tel: undefined,
        page: 1,
        size: 30
      },
      renderList: [],
      showEmpty: false,
      showUserInfo: false,
      showState: false
    }
  },
  methods: {
    fetchData() {
      if (this._.isEmpty(this.listQuery.tel)) {
        this.$message({
          type: 'error',
          message: '请输入手机号码！'
        })
      } else {
        getUsersList(this.listQuery).then(response => {
          // console.log(response)
          const { data } = response
          // console.log(data)
          if (this._.isEmpty(data)) {
            this.renderList = []
            this.showEmpty = true
            this.showUserInfo = false
            this.showState = false
          } else {
            this.renderList = data
            if (data[0].state === 3) {
              this.showEmpty = false
              this.showUserInfo = true
              this.showState = false
            } else {
              this.showEmpty = false
              this.showUserInfo = false
              this.showState = true
            }
          }
        }).catch(err => {
          console.log(err)
        })
      }
    },
    handleFilter() {
      this.listQuery.page = 1
      this.fetchData()
    },
    resetFilter() {
      this.$refs.filterForm.resetFields()
      this.renderList = []
      this.showEmpty = false
      this.showUserInfo = false
      this.showState = false
    }
  }
}
</script>
